<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/less/lib/swiper.min.css">
    <link rel="stylesheet" href="../dist/style/css/base.css">
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
</head>

<body>

    <div class="warp">
        <!--header-->
        <header class="hd">
            <a href="#123" class="r-icon">
            <i class="iconfont icon-icon"></i>            
            <span>购物车</span> 
        </a>
            <a href="#123" class="l-icon">
            <i class="iconfont icon-wode"></i>   
            <span>我的</span>      
        </a>
            <p class="tit">
                养悦源
            </p>
        </header>
        <!--banner-->
        <div class="ban">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#123">
                            <img src="../dist/images/banner.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                    <div class="swiper-slide">Slide 6</div>
                    <div class="swiper-slide">Slide 7</div>
                    <div class="swiper-slide">Slide 8</div>
                    <div class="swiper-slide">Slide 9</div>
                    <div class="swiper-slide">Slide 10</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--tit-bar-->
        <div class="tit-bar">
            <img class="zero-icon" src="../dist/images/zero-icon.png" alt="">
        </div>
        <!--prod-list-->
        <div class="prod-list">
            <ul>
                
                <li>
                    <a href="#123">
                        <div class="prod_img">
                            <img src="../dist/images/pro_1.jpg" alt="">
                        </div>
                        <div class="prod_msg">
                            <p class="tit">
                                血压仪
                            </p>
                            <p class="ms-tit">
                                每分钟脉搏/智能语音播报
                            </p>
                            <div class="price">
                                <span class="price-icon">
                                <img src="../dist/images/price-icon.jpg" alt="">
                            </span>
                                <div class="val">
                                    <span>¥</span>399
                                </div>
                            </div>
                            <p class="msg">
                                到手价0元还包邮
                            </p>
                        </div>
                    </a>
                    <a class="shop_btn" href="#444">
                        立即购买
                    </a>
                </li>
                <li>
                    <a href="#123">
                        <div class="prod_img">
                            <img src="../dist/images/pro_1.jpg" alt="">
                        </div>
                        <div class="prod_msg">
                            <p class="tit">
                                血压仪
                            </p>
                            <p class="ms-tit">
                                每分钟脉搏/智能语音播报
                            </p>
                            <div class="price">
                                <span class="price-icon">
                                <img src="../dist/images/price-icon.jpg" alt="">
                            </span>
                                <div class="val">
                                    <span>¥</span>399
                                </div>
                            </div>
                            <p class="msg">
                                到手价0元还包邮
                            </p>
                        </div>
                    </a>
                    <a class="shop_btn" href="#444">
                        立即购买
                    </a>
                </li>
                <li>
                    <a href="#123">
                        <div class="prod_img">
                            <img src="../dist/images/pro_1.jpg" alt="">
                        </div>
                        <div class="prod_msg">
                            <p class="tit">
                                血压仪
                            </p>
                            <p class="ms-tit">
                                每分钟脉搏/智能语音播报
                            </p>
                            <div class="price">
                                <span class="price-icon">
                                <img src="../dist/images/price-icon.jpg" alt="">
                            </span>
                                <div class="val">
                                    <span>¥</span>399
                                </div>
                            </div>
                            <p class="msg">
                                到手价0元还包邮
                            </p>
                        </div>
                    </a>
                    <a class="shop_btn" href="#444">
                        立即购买
                    </a>
                </li>
                <li>
                    <a href="#123">
                        <div class="prod_img">
                            <img src="../dist/images/pro_1.jpg" alt="">
                        </div>
                        <div class="prod_msg">
                            <p class="tit">
                                血压仪
                            </p>
                            <p class="ms-tit">
                                每分钟脉搏/智能语音播报
                            </p>
                            <div class="price">
                                <span class="price-icon">
                                <img src="../dist/images/price-icon.jpg" alt="">
                            </span>
                                <div class="val">
                                    <span>¥</span>399
                                </div>
                            </div>
                            <p class="msg">
                                到手价0元还包邮
                            </p>
                        </div>
                    </a>
                    <a class="shop_btn" href="#444">
                        立即购买
                    </a>
                </li>
            </ul>

        </div>


    </div>

    <script src="../dist/js/base.js"></script>
    <script src="../dist/js/lib/swiper.jquery.min.js"></script>    

    <script>
        // 矫正rem
        function correctrem() {
            var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
            var device_width = Math.min(document.documentElement.clientWidth, 640);
            if (rem_full_width !== device_width) {
                document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
            }
            $('#rem-test').remove();
        }
        correctrem();
        $(function () {
            var swiperSlide = $('.swiper-container').find('.swiper-slide');
            if (swiperSlide.length > 2) {
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                });
            }
        })
    </script>

</body>

</html>